<template>
    <div class="consult-container">
        <!-- 新增咨询表单 -->
        <el-dialog :visible.sync="dialogVisible" title="我要咨询" custom-class="consult-dialog" width="40%" @close="close">
            <el-form
                    :model="consultData"
                    ref="consultForm"
                    :rules="consultRules"
                    status-icon>
                <el-form-item prop="consult">
                    <el-input
                            v-model="consultData.consult"
                            placeholder="请输入你想咨询的问题"
                            clearable
                            type="textarea"
                            :autosize="{ minRows: 5, maxRows: 8 }"
                            show-word-limit
                            maxlength="200"
                    ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="danger" @click="saveOrUpdate" round>发表咨询</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import {saveConsult} from '@/api/consult'
  import {mapGetters} from 'vuex';
  import {validNormal} from '@/validate/register';

  export default {
    // 父组件向子组件传值
    props: {
      courseId: {
        type: String,
        default: null
      }
    },

    data () {
      //检验咨询
      const validateConsult = (rule, value, callback) => {
        if (value.length < 10 || value.length > 200 || !validNormal(value)){
          callback(new  Error("请输入正确的咨询内容，长度要求为10-200"))
        }
        else callback()
      }

      return {
        dialogVisible: false,
        consultData: {
          userId: this.userId,
          courseId: this.courseId,
          consult: ''
        },

        consultRules:{
          consult:[{validator: validateConsult,trigger: 'blur'}],
        }
      }
    },
    methods: {
      open () {
        this.dialogVisible = true
      },
      close () {
        this.$refs.consultForm.resetFields();
        this.dialogVisible = false
        // 重置表单
        this.resetForm()
      },
      resetForm () {
        this.consultData.consult = ''
      },
      saveOrUpdate () {
        this.save()
      },
      save () {
        this.$refs.consultForm.validate((valid) => {
          if (valid) {
            //检验通过
            this.consultData.userId = this.userId
            saveConsult(this.$qs.stringify(this.consultData)).then(result => {
              let {code, data} = result
              if (code === 20000) {
                this.$message({
                  type: 'success',
                  message: '发表成功！'
                })
                this.dialogVisible = false
                // 调用父组件监听函数
                this.$emit('onSaveSuccess')
              }
            })
          }
          else {
            return false;
          }
        })
      }
    },
    computed: {
      ...mapGetters({
        'userId': 'id'
      })
    },
  }
</script>

<style>
    .consult-dialog {
        box-shadow: 0 0 8px 4px rgba(7, 17, 27, 0.1);
        border-radius: 12px;
    }

    .el-dialog__body {
        padding: 15px 20px 0px 20px;
    }

    .el-textarea__inner {
        font-weight: 500;
    }

    .el-button--danger {
        background-color: #f20d0d;
        width: 120px;
    }
</style>
